<template>
  <div class="srcThem">
    <div class="left">
      <div class="icon"><svg-icon icon-class="tree-table" /> <span>数据集目录</span></div>
      <el-tree :data="navList" node-key="id" :default-expanded-keys="defaultexpandedkeys" accordion :props="defaultProps" @node-click="handleNodeClick" />
      <!-- <tree></tree> -->
    </div>

    <div v-if="indexPId!=0" class="right">
      <div style="margin-bottom: 10px;">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />在该目录下创建数据集</el-button>
        <template>
          <el-popconfirm title="确定删除吗？" icon-color="#f00" @confirm="deleteSelectData2(navData)">
            <el-button v-show="showDel" slot="reference" type="danger">删除数据集</el-button>
          </el-popconfirm>
        </template>
      </div>
      <ykhttb
        ref="httbRef"
        width="250"
        :btn-is-show="btnIsShow"
        :table-col="tabUserList"
        :table-data="tableUserData"
        @getDataDetileInfo="getDataDetileInfo"
        @deleteSelectData="deleteSelectData"
      />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div v-else class="right" style="text-align: center;padding-top: 250px;">
      <img v-if="nodata" :src="nodata" style="vertical-align: middle;width: 150px;">
      <div>暂无数据</div>
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" width="30%" :visible.sync="dialogTableVisible">
      <!-- 名称和路径必输 -->
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
        <el-form-item label="数据集名称" prop="subjectDataSetName">
          <el-input v-model="ruleForm['subjectDataSetName']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="数据集描述" prop="remark">
          <el-input v-model="ruleForm['remark']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="接入任务类型" prop="dataAccessTaskTypeNum">
          <el-select v-model="ruleForm['dataAccessTaskTypeNum']" :disabled="disFlag" clearable placeholder="" @change="getName">
            <el-option
              v-for="(item,i) in selectDataList"
              :key="i"
              :label="item.name"
              :value="Number(item.num)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="接入任务名称" prop="dataAccessTaskTable">
          <el-select v-model="ruleForm['dataAccessTaskTable']" :disabled="disFlag" clearable placeholder="" @change="getName2">
            <el-option
              v-for="(item,i) in selectDataList2"
              :key="i"
              :label="item.dataAccessTaskName"
              :value="item.dataAccessTaskTable"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div v-if="!disFlag" style="text-align: center;">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('return')">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import nodata from '@/assets/images/nodata.png'
import tree from './tree.vue'
import {
  dataSubjectdataSetgetSubjectNode,
  dataSubjectdirectoryupdateById,
  dataSubjectdirectorygetList,
  dataSubjectdataSetdeleteDataSet,
  dataSubjectdataSetgetDataAccessTask,
  dataSubjectdataSetaddDataSet,
  dataSubjectdataSetgetDataSetInfo
} from '@/api/zt/index'
import experiment from '@/mixins/experiment'

export default {
  components: { tree
  },
  mixins: [experiment],
  data() {
    return {
      nodata: nodata,
      defaultexpandedkeys: [],
      navData: null,
      indexPId: 0,
      navList: [],
      defaultProps: {
        children: 'children',
        label: 'nodeName'
      },
      btnIsShow: {
        operate: false,
        detile: true,
        del: true
      },
      title: '新增',
      rules: {
        subjectDataSetName: [
          { required: true, message: '请输入数据集名称', trigger: 'change' }
        ],
        dataAccessTaskTypeNum: [
          { required: true, message: '请选择接入任务类型', trigger: 'change' }
        ],
        dataAccessTaskTable: [
          { required: true, message: '请选择任务名称', trigger: 'change' }
        ]
      },
      selectDataList2: [],
      dialogTableVisible: false,
      ruleForm: {
        'dataAccessTaskTypeName': '',
        'dataAccessTaskTable': '',
        'subjectDirectoryId': 0,
        'subjectDataSetName': '',
        'dataAccessTaskTypeNum': 0,
        'subjectDirectoryName': '',
        'dataAccessTaskName': '',
        'remark': ''
      },
      userId: '',
      formInline: {
        'dataModelName': ''
      },
      tableUserData: [],
      tabUserList: [],
      selectDataList: [],
      showDel: false,
      total: 0,
      size: 10,
      page: 1,
      tpConent: 1
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.path == '/ykp/dataChildrenSys/datasadm') {
        this.tpConent = 1
      } else if (this.$route.path == '/ykp/datatheme/datasadm') {
        this.tpConent = 2
      }
      this.getNavList()
      this.getcodequery('dataAccessTaskType')
    })
  },
  methods: {
    queryList(v) {
      this.$refs.httbRef.isShowLoading(true)

      dataSubjectdataSetgetDataSetInfo({
        'pageIndex': this.page,
        'id': v.id,
        'typeContent': this.tpConent,
        'pageSize': this.size
      }).then(res => {
        this.tabUserList = []
        if (res.code == 200) {
          this.tableUserData = res.data.records
          this.$refs.httbRef.isShowLoading(false)
          if (this.tableUserData.length > 0) {
            const keys = Object.keys(this.tableUserData[0])
            keys.forEach((item, index) => {
              var o = {
                key: item,
                title: item
              }
              this.tabUserList.push(o)
            })
          }
          this.total = res.data.total
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    deleteSelectData2(v) {
      const ids = { id: v.id }
      dataSubjectdataSetdeleteDataSet(ids).then(res => {
        if (res.code == 200) {
          this.indexPId = 0
          this.getNavList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    getNavChildrenList(v) {
      this.dialogTableVisible = false
      dataSubjectdirectorygetList({
        'pageIndex': this.page,
        'pageSize': this.size,
        'typeContent': this.tpConent,
        'subjectDirectoryName': v
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      })
    },
    handleNodeClick(data) {
      this.defaultexpandedkeys = [data.id]
      this.indexPId = data.parentId
      this.size = 10
      this.page = 1
      this.navData = JSON.parse(JSON.stringify(data))
      if (data.parentId != '0' && data.parentId != '1') {
        this.queryList(data)
        this.showDel = true
        return
      }
      this.showDel = false
      if (this.indexPId == '1') {
        this.tabUserList = [
          {
            key: 'subjectDirectoryName',
            title: '目录名称'
          },
          {
            key: 'subjectDirectoryTypeName',
            title: '目录类型'
          },
          {
            key: 'dataProvider',
            title: '数据提供方'
          },
          {
            key: 'phoneNumber',
            title: '联系方式'
          }
        ]
      }
      this.getNavChildrenList(data.nodeName)
    },
    getName() {
      dataSubjectdataSetgetDataAccessTask({
        'dataAccessTaskTypeNum': this.ruleForm['dataAccessTaskTypeNum']
      }).then(res => {
        if (res.code == 200) {
          this.ruleForm['dataAccessTaskTable'] = ''
          this.selectDataList2 = res.data
        } else {
          this.errorDialog(res.msg)
        }
      })
      this.selectDataList.forEach((item, index) => {
        if (this.ruleForm['dataAccessTaskTypeNum'] == item.num) {
          this.ruleForm['dataAccessTaskTypeName'] = item.name
        }
      })
    },
    getName2() {
      this.selectDataList2.forEach((item, index) => {
        if (this.ruleForm['dataAccessTaskTable'] == item.dataAccessTaskTable) {
          this.ruleForm['dataAccessTaskName'] = item.dataAccessTaskName
        }
      })
    },
    deleteSelectData(v) { // 表格里面删除废弃
      const ids = [{ id: v.id }]
      dataSubjectdataSetdeleteDataSet(ids).then(res => {
        if (res.code == 200) {
          this.getNavList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    commitFromData() {
      if (this.navData.parentId != '0' && this.navData.parentId != '1') {
        this.ruleForm.subjectDirectoryId = this.navData.parentId
        this.ruleForm.subjectDirectoryName = this.navData.parentName
      } else {
        this.ruleForm.subjectDirectoryId = this.navData.id
        this.ruleForm.subjectDirectoryName = this.navData.nodeName
      }

      this.ruleForm['typeContent'] = this.tpConent
      if (this.ruleForm.hasOwnProperty('id')) {
        dataSubjectdirectoryupdateById(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getNavList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        dataSubjectdataSetaddDataSet(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getNavList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      if (this.showDel) {
        this.queryList(this.navData) // 三级
      } else {
        this.getNavChildrenList(this.navData.nodeName)// 2级
      }
    },
    handleCurrentChange(v) {
      this.page = v
      if (this.showDel) {
        this.queryList(this.navData) // 三级
      } else {
        this.getNavChildrenList(this.navData.nodeName)// 2级
      }
    },
    getNavList() {
      this.dialogTableVisible = false
      dataSubjectdataSetgetSubjectNode({
        'typeContent': this.tpConent
      }).then(res => {
        console.log(res)
        this.navList = [res.data]
        if (this.navList[0].children && this.navList[0].children[0]) {
          this.handleNodeClick(this.navList[0].children[0])
        }
        if (this.defaultexpandedkeys.length == 0) {
          let ks = '1'
          if (res.data.children && res.data.children.length > 0) {
            ks = res.data.children[0].id
          }
          this.defaultexpandedkeys = [ks]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-tree-node__content{
  height: 30px;
}
// >>>.el-tree-node__expand-icon{
//   color: #fc9001;
// }
.srcThem{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 !important;
    .left{
        width: 16%;
        border: 1px solid #eee;
        border-radius: 4px;
        padding:30px 10px 10px 10px;
        min-height: calc(100vh - 115px);
        >div.icon{
          padding-left: 5px;
          font-weight: bold;
          margin-bottom:10px;
          border-bottom: 1px solid #eee;
          svg{
            font-size:16px;
            margin: 0 auto;
            margin-bottom:5px;
            vertical-align: middle;
            color: #fc9001;
            margin-right: 2px;
          }
        }
    }
    .right{
        width: 83%;
        padding:20px 10px;
    }
    .el-select{
        width:100%;
    }
}
</style>
